# Introduction to styling an unordered <ul> list as a menu

## Outline of the basic steps

See the CSS for the menu here...
Download the CSS as a pdf here...

### Unordered list no styling

### Step 1: Target the <ul> with CSS

Remove the bullet points, margin and padding of the list

### Step 2: Target the <li> with CSS

For a horizontal menu place the list items in a line*. Omit this step for a vertical menu

### Step 3: Target the links <a> with CSS

Most of the styling to change the appearance is applied to the links

### Or, for a vertical menu...

## The CSS

### The HTML for the list:

    <ul>
    	<li>item 1</li>
    	<li>item 2</li>
    	<li>item 3</li>
    </ul>

### Step 1: Target the <ul> with CSS

Remove the bullet points, margin and padding of the list

    ul {
    	list-style-type:none;
    	padding:0;
    	margin:0;
    }

### Step 2: Target the <li> with CSS

Place the list items in a line, if required*. Omit this step for a vertical menu

    ul li {
    	float:left;
    }

### Step 3: Target the links <a> with CSS

Most of the styling to change the appearance is applied to the links

    ul li a {
    	text-decoration:none;
    	color:#000000;
    	background-color:#C0C0C0;
    	padding: 5px 10px 5px 10px;
    }

    ul li a:hover {
    	background-color:#FFC13B;
    }

To prevent menu items from overlapping with a vertical menu, create the selector `ul li` and add the CSS property of `margin-bottom:`

    ul li {
    	margin-bottom:15px;
    }

### *important

Floating list items left will cause content in the page after the menu to move up beside it. The following CSS will fix this:

    ul:after {
    	content: "";
    	clear:both;
    	display:block;
    }